<template>
  <div class="equip-wrap-common">
    <px-form ref="searchFormRef" class="custom-form-ui equip-form" :model="queryParams" label-position="right" label-width="120px">
      <px-row :gutter="16">
        <px-col :span="6">
          <px-form-item label="设备编号" prop="eqpId">
            <px-input
              v-model="queryParams.eqpId"
              placeholder="请输入设备编号"
              maxlength="50"
              clearable
              @blur="queryParams.eqpId = $event.target.value.trim()"
              @keyup.enter="queryTable"
            >
              <template #suffix>
                <px-icon style="cursor: pointer" @click="queryTable">
                  <search />
                </px-icon>
              </template>
            </px-input>
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-form-item label="设备名称" prop="eqpName">
            <px-input v-model="queryParams.eqpName" placeholder="请输入设备名称" clearable maxlength="50" @keyup.enter="queryTable">
              <template #suffix>
                <px-icon style="cursor: pointer" @click="queryTable">
                  <search />
                </px-icon>
              </template>
            </px-input>
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-form-item label="响应状态" prop="responseStatus">
            <px-select v-model="queryParams.responseStatus" placeholder="请选择响应状态" clearable filterable>
              <px-option v-for="item in statusList" :key="item.id" :label="item.label" :value="item.value" />
            </px-select>
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-form-item label="工单状态" prop="orderStatus">
            <px-select v-model="queryParams.orderStatus" placeholder="请选择工单状态" clearable filterable>
              <px-option v-for="item in maintainStatusList" :key="item.id" :label="item.name" :value="item.value" />
            </px-select>
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-form-item label="报警内容" prop="alarmContent">
            <px-input v-model="queryParams.alarmContent" placeholder="请输入报警内容" maxlength="50" @keyup.enter="queryTable">
              <template #suffix>
                <px-icon style="cursor: pointer" @click="queryTable">
                  <search />
                </px-icon>
              </template>
            </px-input>
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-form-item label="报警时间" prop="time">
            <px-date-picker
              v-model="queryParams.time"
              format="YYYY-MM-DD"
              value-format="YYYY-MM-DD"
              type="daterange"
              range-separator="-"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            />
          </px-form-item>
        </px-col>
        <px-col :span="6">
          <px-button type="primary" @click="queryTable">查询</px-button>
          <px-button @click="resetTable">重置</px-button>
        </px-col>
      </px-row>
    </px-form>
    <px-table :data="tableData" class="equip-table" size="small" height="calc(100vh - 320px)" border>
      <px-table-column type="index" label="序号" width="56" fixed align="center" />
      <px-table-column
        v-for="(item, index) in tableColumns"
        :key="index"
        :label="item.label"
        :min-width="item.minWidth"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :fixed="item.fixed"
      >
        <template v-if="item.type === 'status'" #default="scope">
          <span v-if="scope.row.responseStatus === '已关闭'">-</span>
          <px-tag
            v-else-if="scope.row.relationOrderStatusDesc"
            effect="plain"
            :style="{
              color: `${tagColorList[scope.row.relationOrderStatus]}`,
              border: `1px solid ${tagBorderColorList[scope.row.relationOrderStatus]}`,
              backgroundColor: `${tagBgColorList[scope.row.relationOrderStatus]}`,
              cursor: 'pointer'
            }"
          >
            {{ scope.row.relationOrderStatusDesc }}
          </px-tag>
          <span v-else>-</span>
        </template>
        <template v-else #default="scope">{{
          scope.row[item.prop] === 0 ? scope.row[item.prop] : scope.row[item.prop] ? scope.row[item.prop] : "-"
        }}</template>
      </px-table-column>
      <px-table-column label="备注" min-width="100">
        <template #default="scope">
          <div v-if="scope.row.responseStatus === 'CLOSED'">
            <px-tooltip v-if="scope.row.closeReason" :content="scope.row.closeReason || ''">
              <p class="overflow-tooltip">{{ scope.row.closeReason || "-" }}</p>
            </px-tooltip>
            <span v-else>-</span>
          </div>
          <px-button v-else v-has="'ERC_MAINTAIN_HISTORY_DETAIL'" link type="primary" @click="handleView(scope.row)">详情</px-button>
        </template>
      </px-table-column>
    </px-table>
    <pagination
      v-show="total > 0"
      v-model:page="queryParams.pageNum"
      v-model:limit="queryParams.pageSize"
      class="equip-table-pagination"
      :total="total"
      @pagination="queryTable"
    />
  </div>
</template>
<script setup lang="ts">
defineOptions({
  name: "ERC_ALARM_HISTORY"
});
import { getAlarmEnum, queryAlarmList } from "@/api/erc/alarm";
import { getStatusList } from "@/api/erc/maintain";
import { onMounted, reactive, toRefs } from "vue";
import { useRouter } from "vue-router";

const router = useRouter();

const state = reactive<any>({
  queryParams: {
    pageNum: 1,
    pageSize: 20
  },
  tableData: [],
  total: 0,
  tableColumns: [
    { prop: "eqpId", label: "设备编号", minWidth: "100", showOverflowTooltip: true, fixed: "left" },
    { prop: "eqpName", label: "设备名称", type: "link", minWidth: "100", showOverflowTooltip: true },
    { prop: "alarmContent", label: "报警内容", minWidth: "150", showOverflowTooltip: true },
    { prop: "eqpPosition", label: "设备位置", minWidth: "120", showOverflowTooltip: true },
    { prop: "alarmTime", label: "报警时间", minWidth: "140", showOverflowTooltip: true },
    { prop: "responseStatusDesc", label: "响应状态", minWidth: "90", showOverflowTooltip: true },
    { prop: "relationOrderStatusDesc", label: "工单状态", minWidth: "90", showOverflowTooltip: true, type: "status" },
    { prop: "updateTime", label: "响应时间", minWidth: "140", showOverflowTooltip: true }
  ],
  statusList: [],
  maintainStatusList: [] // 转维修的工单的状态
});
const { queryParams, tableColumns, tableData, total, statusList, maintainStatusList } = toRefs(state);

const getEnum = async () => {
  const res: any = await getAlarmEnum();
  statusList.value = Object.keys(res.ALARM_RESPONSE_STATUS).map((item, index) => ({
    id: index + 1,
    value: item,
    label: res.ALARM_RESPONSE_STATUS[item]
  }));
  console.log(statusList.value);
};

const getStatus = async () => {
  maintainStatusList.value = await getStatusList({});
};

const tagColorList = {
  0: "#F59E0B", // 待维修
  1: "#3B82F6", // 维修中
  2: "#F59E0B", // 审核中
  3: "#EF4444", // 已驳回
  5: "#909399", // 已撤销
  6: "#9254DE" // 驳回不通过
};

const tagBorderColorList = {
  0: "#FCE2B6", // 待维修
  1: "#C6E2FF", // 维修中
  2: "#FCE2B6", // 审核中
  3: "#FAC7C7", // 已驳回
  4: "#B7EAD9", // 已完成
  5: "#E9E9EB", // 已撤销
  6: "#DDC2FF" // 驳回不通过
};

const tagBgColorList = {
  0: "#FEF5E6", // 待维修
  1: "#ECF5FF", // 维修中
  2: "#FEF5E6", // 审核中
  3: "#FEECEC", // 已驳回
  4: "#E8F8F3", // 已完成
  5: "#F4F4F5", // 已撤销
  6: "#F2E7FF" // 驳回不通过
};

// 查询列表
const queryTable = async () => {
  const params = JSON.parse(JSON.stringify(queryParams.value));
  const { time, responseStatus } = params;
  const data = await queryAlarmList({
    startTime: time && time[0] ? `${time[0]} 00:00:00` : "",
    endTime: time && time[1] ? `${time[1]} 23:59:59` : "",
    ...params,
    responseStatus: responseStatus ? [responseStatus] : ["CLOSED", "EVENT"]
  });
  tableData.value = data?.data || [];
  total.value = data?.total;
};
// 重置筛选条件列表
const resetTable = async () => {
  queryParams.value = {
    pageNum: queryParams.value.pageNum,
    pageSize: queryParams.value.pageSize
  };
  queryTable();
};

// 进入页面时触发
onMounted(async () => {
  getEnum();
  queryTable();
  getStatus();
});

const handleView = (row: any) => {
  router.push(`/erc/maintain/detail?eqpId=${row.eqpId}&alarmId=${row.id}`);
};
</script>

<style lang="scss" scoped>
@import url("@/views/erc/scss/table-list.scss");

.overflow-tooltip {
  width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
